<template>
    <div class="wrapper" @click="cancelActive" v-loading="loading">
        <div class="ep-title">
            <div>
                Subscribe and Request accreditation
            </div>
        </div>
        <div class="input-content">
            <div class="ex-header-brand-search">
                <div class="ex-header-brand-search-wrapper">
                    <input id="input_phone" class="el-input" type="text" v-model="form.name" placeholder="NAME">
                </div>
                <div class="input-hint" v-show="nameReq">REQUIRED</div>
            </div>
            <div class="ex-header-brand-search">
                <div class="ex-header-brand-search-wrapper">
                    <input class="el-input" type="text" v-model="form.phone" placeholder="PHONE">
                </div>
                <div class="input-hint" v-show="phoneReq">REQUIRED</div>
            </div>
            <div class="ex-header-brand-search">
                <div class="ex-header-brand-search-wrapper">
                    <input id="input_name" class="el-input" type="text" v-model="form.fax" placeholder="FAX">
                </div>
                <div class="input-hint" v-show="faxReq">REQUIRED</div>
            </div>

            <div class="ex-header-brand-search">
                <div class="ex-header-brand-search-wrapper">
                    <input class="el-input" type="text" v-model="form.email" placeholder="E-MAIL">
                </div>
                <div class="input-hint" v-show="emailReq">REQUIRED</div>
            </div>
        </div>
        <div class="input-leave">
            <textarea cols="30" rows="8" v-model="form.introduction" placeholder="LEAVE YOUR INTRODUCTION"/>
            <div class="input-hint" v-show="introductionReq">REQUIRED</div>
        </div>

        <div class="em-btn-div">
            <div class="submit" @click="save">
                <span>SUBMIT</span>
            </div>
        </div>
    </div>

</template>
<script setup lang="ts">
    import {ref} from "vue";

    const props = defineProps({
        close: {
            type: Function,
            required: true,
        },
    });

    const form = ref({
        name: "",
        fax: "",
        phone: "",
        email: "",
        introduction: ""
    })
    const faxReq = ref(false);
    const nameReq = ref(false);
    const phoneReq = ref(false);
    const emailReq = ref(false);
    const introductionReq = ref(false);

    const checkIsFill = () => {

        if (form.value.fax && form.value.fax != "") {
            faxReq.value = false
        } else {
            faxReq.value = true;
        }

        if (form.value.name && form.value.name != "") {
            nameReq.value = false
        } else {
            nameReq.value = true;
        }

        if (form.value.phone && form.value.phone != "") {
            phoneReq.value = false
        } else {
            phoneReq.value = true;
        }

        if (form.value.email && form.value.email != "") {
            emailReq.value = false
        } else {
            emailReq.value = true;
        }

        if (form.value.introduction && form.value.introduction != "") {
            introductionReq.value = false
        } else {
            introductionReq.value = true;
        }


        if (!faxReq.value && !nameReq.value && !phoneReq.value
            && !emailReq.value && !introductionReq.value) {

            return true;
        } else {
            return false;
        }
    }

    const save = () => {
        if (checkIsFill()) {
            // 发送异步请求
            $fetch(`/api/subscribe/save`, {
                method: 'POST',
                body: form.value
            }).then(response => {
                if (response.code == 200) {
                    alert("Submitted successfully!")
                }else {
                    alert("Submitted Failed!")
                }
                // console.log(response)
            }).catch(error => {
                alert("Submitted Failed!")
                console.error('Error fetching posts:', error);
            });
            props.close();
        }
    }

</script>

<style scoped lang="scss">
    .wrapper {
        background-color: #FFFFFF;
        /*min-height: 1200px;*/
        /*padding-left: 540px;*/
        /*padding-top: 90px;*/
        padding: 0 90px;

        .ep-title {
            /*width: 1920px;*/
            width: 1024px;
            text-align: center;

            div {
                padding-top: 50px;
                width: 844px;
                text-align: center;
                font-size: 32px;
                // color: #30363A;
                /*margin-bottom: 24px;*/
                /*margin-top: 40px;*/
                background-image: -webkit-linear-gradient(180deg, #26B7BC 0%, #26B7BC 30%, #BB916C);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }
        }

        .input-hint {
            margin-top: 5px;
            color: red;
            font-weight: 300;
            font-family: Hiragino Sans GB, Microsoft YaHei, WenQuanYi Micro Hei, Helvetica Neue, Arial, sans-serif;
        }

        .input-content {
            width: 1000px;
            margin-top: 60px;

            .ex-header-brand-search {
                margin-right: 30px;
                width: 400px;
                // transform: translateY(-50%);、
                display: inline-block;
                height: 100px;
                vertical-align: top;

                .ex-header-brand-search-wrapper {
                    padding-bottom: 8px;
                    width: 400px;
                    height: 40px;
                    border-bottom: 1px solid #000;
                    align-items: center;
                    /* 垂直居中所有子元素 */
                    justify-content: start;
                    cursor: pointer;

                }

                .el-input {
                    border: none;
                    line-height: 40px;
                    /* 移除边框 */
                    outline: none;
                    /* 在选中时移除轮廓线 */
                    background-color: transparent;
                    /* 设置背景色为透明 */
                    //caret-color: #ffffff;
                    /* 字体大小 */
                    font-size: 20px;
                    color: #000;
                    font-weight: 300;
                    font-family: Hiragino Sans GB, Microsoft YaHei, WenQuanYi Micro Hei, Helvetica Neue, Arial, sans-serif;
                }

                .ci_country_select {
                    position: relative;
                    top: 10px;
                    pointer-events: none;
                    height: 0px;
                    box-shadow: 0 0 2rem 0 rgb(0 0 0 / 10%);
                    background-color: #fff;
                    line-height: 50px;
                    width: 100%;
                    overflow-y: scroll;
                    z-index: 2;
                    transition: all .5s;
                    font-size: 30px;
                    color: #000;
                    font-weight: 300;
                    font-family: Hiragino Sans GB, Microsoft YaHei, WenQuanYi Micro Hei, Helvetica Neue, Arial, sans-serif;

                    div:hover {
                        background-color: rgb(238, 238, 238);
                        cursor: pointer;
                    }
                }

                .ci_country_select:focus {
                    height: 250px;
                    pointer-events: auto;
                    outline: none;
                }
            }
        }

        .input-leave {
            height: 200px;

            textarea {
                resize: none;
                width: 830px;
                height: 200px;
                line-height: 40px;
                /* 移除边框 */
                outline: none;
                /* 在选中时移除轮廓线 */
                background-color: transparent;
                /* 设置背景色为透明 */
                //caret-color: #ffffff;
                /* 字体大小 */
                font-size: 20px;
                color: #000;
                font-weight: 300;
                font-family: Hiragino Sans GB, Microsoft YaHei, WenQuanYi Micro Hei, Helvetica Neue, Arial, sans-serif;
            }

        }

        .check-content {
            height: 50px;

            .check-box {
                vertical-align: top;
                display: inline-block;
                user-select: none;
                width: 20px;
                height: 20px;
                border: 1px solid #000;
                cursor: pointer;

                img {
                    width: 20px;
                }
            }

            a {
                display: inline-block;
                width: 200px;
                font-weight: 300;
                margin-left: 10px;
                font-family: Hiragino Sans GB, Microsoft YaHei, WenQuanYi Micro Hei, Helvetica Neue, Arial, sans-serif;
            }
        }
        .em-btn-div {
            width: 830px;
            padding:0 265px;
            padding-bottom: 50px;

            .submit {
                user-select: none;
                margin-top: 65px;
                width: 300px;
                height: 60px;
                line-height: 60px;
                text-align: center;
                background: rgb(199, 142, 102, 0.08);
                border-bottom: 4px solid #C78E66;
                color: #000000;
                cursor: pointer;
                transition: background-color .3s;
                font-size: 16px;
                font-weight: 300;
                font-family: Hiragino Sans GB, Microsoft YaHei, WenQuanYi Micro Hei, Helvetica Neue, Arial, sans-serif;
            }

            .submit:hover {
                background-color: rgb(199, 142, 102, 0.38);
            }
        }


        :deep(.el-loading-spinner) {
            .path {
                stroke: #444;
            }
        }
    }
</style>
